<template>
    <div>
        <el-cascader
            v-if="controlType === 'add'"
            v-model="value" 
            :props="defaultProps" 
            :disabled="disabled" 
            :show-all-levels="showAllLevels" 
            :options="formatOption(options)" 
            :placeholder="`请选择${label}`" 
            :style="domCss" 
            @blur="Change('blur')" 
            @focus="Change('focus')" 
            @change="Change('change')"></el-cascader>

        <Txt v-else :defaultValue="defaultValue" />

    </div>
</template>
<script>
import Txt from './txt'
export default {
    components: {Txt},
    props: {
        label: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        showAllLevels: {
            type: Boolean,
            default: false
        },
        options: {
            type: Array,
            default: () => []
        },
        defaultProps: {
            type: Object,
            default: () => {return {
                label: 'label',
                value: 'value',
                children: 'children'
            }}
        },
        
        domCss: {
            type: String,
            default: ''
        },
        defaultValue: '',
        controlType: {
            type: String,
            default: 'add'
        }
    },
    watch: {
        defaultValue: {
            deep: true,
            immediate: true,
            handler: function(v) {
                this.value = v.indexOf(',') > -1 ? v.split(',') : v
            }
        }
    },
    data() {
        return {
            value: [],
        };
    },
    
    methods: {
        Change(type) {
            this.$emit('EventHandler',type, this.$attrs.prop,this.value.join(','));
        },
        formatOption(val) {
            let arr = []
            arr = val.map(item => {
                if (item[this.defaultProps.children] && item[this.defaultProps.children].length == 0) {
                    item[this.defaultProps.children] = null
                }
                return item
            })
            return arr
        }
    },
    filter: {
        
    }
};
</script>
